<template>
    <div class="right">
        <div class="right-top">
            <div class="rt-up">
                <span class="rtp-name">古风美体操</span>
                <div class="rt-right">
                    <el-button @click="router.back()">返回</el-button>
                </div>
            </div>
            <div class="rt-down">
                <div class="rt-main">
                    <img
                        class="userImg"
                        :src="detailsList?.statistics.creatorAvatar"
                    />
                    <span class="userName">
                        {{ detailsList?.statistics.creatorName }}</span
                    >
                    <span class="rext"> 创建于2021-07-07</span>
                </div>
            </div>
        </div>
        <!-- 右下 -->
        <div class="right-lower">
            <div class="right-content">
                <div class="card-wrapper">
                    <div class="loadMoreList">
                        <div
                            class="training-item"
                            v-for="item in detailsList?.content"
                            :key="item.id"
                            @mouseenter="moveShow(item.id)"
                            @mouseleave="isShow = ''"
                        >
                            <div style="display: flex">
                                <div class="cover">
                                    <img :src="item.cover" />
                                </div>
                                <div>
                                    <div class="title">
                                        {{ item.contentName }}
                                    </div>
                                    <div class="time">未开始</div>
                                </div>
                            </div>
                            <div class="status">
                                <el-button
                                    class="details-btn"
                                    v-show="isShow == item.id"
                                >
                                    开始练习
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { onMounted, ref } from "vue";
import trainingRoomApi, {
    type AllData,
    type MyExerciseAll,
} from "../../../../api/trainingRoom";

//开始练习的展示
const moveShow = (id: string) => {
    isShow.value = id;
};

const detailsList = ref<AllData>();
const getAllData = async () => {
    try {
        let result = await trainingRoomApi.getDetailsList();
        detailsList.value = result;
        console.log(result);
    } catch (error) {
        console.error("获取我的练习室全部数据失败");
    }
};

const isShow = ref("");
onMounted(() => {
    getAllData();
});
</script>

<style lang="scss" scoped>
.right {
    width: 83%;
    float: left;
    .right-top {
        padding: 40px;
        background-color: #fff;
        border-radius: 5px;
        .rt-up {
            .rtp-name {
                font-size: 26px;
            }
            .rt-right {
                float: right;
            }
        }
        .rt-down {
            margin-top: 10px;
            .rt-main {
                display: flex;
                align-items: center;
                .userImg {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                }
                .userName {
                    font-size: 18px;
                    margin: 0 10px 5px 5px;
                }
                .rext {
                    font-size: 14px;
                    color: #333;
                }
            }
        }
    }
    .right-lower {
        height: 730px;
        margin-top: 10px;
        background-color: #fff;
        border-radius: 5px;
        .right-content {
            width: 100%;
            float: left;
            overflow: hidden;
            background-color: #fff;
            // margin-bottom: 20px;
            // padding: 0 20px 0;
            border-radius: 4px;
            // min-height: 700px;

            .card-wrapper {
                margin-top: 20px;
                padding-bottom: 20px;

                .loadMoreList {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    margin-left: auto;
                    margin-right: auto;
                    -webkit-box-pack: start;

                    .training-item {
                        cursor: pointer;
                        box-sizing: border-box;
                        padding-top: 20px;
                        padding-bottom: 20px;
                        width: 100%;
                        border-bottom: 1px solid #e3e3e3;
                        display: flex;
                        -webkit-box-pack: justify;
                        justify-content: space-between;
                        -webkit-box-align: center;
                        align-items: center;
                        padding: 20px;

                        .cover {
                            width: 169px;
                            height: 101px;
                            border-radius: 4px;
                            background-size: cover;
                            background-position: 50%;
                            margin-right: 20px;
                            background-color: #f93684;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    .title {
                        font-weight: 700;
                        font-size: 16px;
                        color: #111;
                    }

                    .time {
                        margin-top: 25px;
                        font-size: 14px;
                        color: #7d8090;
                    }
                }
            }
        }
    }
}
.details-btn{
  background-color: #f93684;
  color:#fff;
}
.el-button:hover{
  color: #fff;
}

</style>
